<template>
  <div class="product">
    <el-row class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path: '/'}">产品管理</el-breadcrumb-item>
        <el-breadcrumb-item>产品信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row class="search-bar">
      <el-col :span="18">
        <el-form :inline="true" size="small">
          <el-form-item>
            <el-input v-model="search.mfn" placeholder="MFN" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">检索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="11">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <el-dropdown>
          <el-button type="primary" size="small">
            批量操作
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>导入商品</el-dropdown-item>
            <el-dropdown-item>导出产品</el-dropdown-item>
            <el-dropdown-item>批量传图</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="2">&nbsp;</el-col>
      <el-col :span="2">
        <el-button type="primary" plain size="small" @click="createProduct()">新增产品</el-button>
      </el-col>
    </el-row>
    <el-row class="table">
      <el-table stripe ref="productTable" :data="productlist" border>
        <el-table-column type="selection" width="36"></el-table-column>
        <el-table-column mini-width="20%" label="货品">
          <template v-slot="scope">
            <product-info-table-cell
              :cover="scope.row.cover"
              :title="scope.row.name"
              :mfn="scope.row.mfn"
            ></product-info-table-cell>
          </template>
        </el-table-column>
        <el-table-column prop label="品类" width="100"></el-table-column>
        <el-table-column prop="color" label="主色" width="100"></el-table-column>
        <el-table-column prop="material" label="主材质" width="100"></el-table-column>
        <el-table-column label="开发人员" mini-width="10%"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="editProduct(scope.row.mfn)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="pagination">
      <el-pagination
        :current-page.sync="search.page"
        :page-sizes="[10,20,30,50]"
        layout="total,prev, pager, next,sizes,jumper"
        :total="search.total"
        @current-change="changePageHandler"
        @size-change="changeSizeHandler"
      ></el-pagination>
    </el-row>

  </div>
</template>

<script>
import Product from "@/api/product";
import ProductInfoTableCell from "@/components/productInfoTableCell";


export default {
  components: { 
    ProductInfoTableCell
  },
  data() {
    return {
      search: {
        mfn: "",
        page: 1,
        num_per_page: 10,
        total: 0
      },
      productlist: []
    };
  },
  created() {
    this.getProductlist();
  },
  methods: {
    getProductlist() {
      Product.getProductList(this.search).then(res => {
        this.productlist = res.dat.data;
        this.search.total = res.dat.total;
      });
    },
    editProduct(mfn) {
      this.$router.push({
        name: 'productDetail',
        query: {
          'mfn': mfn
        }
      });
    },
    createProduct() {
      this.editProduct(null);
    },


    changePageHandler() {
      this.getProductlist();
    },
    changeSizeHandler(size) {
      this.search.num_per_page = size;
      this.getProductlist();
    }
  }
};
</script>>